<template>
    <div>
        <swiper class="swiper" :options="swiperOption">
            <swiper-slide class="text">
                <div class="content">
                    Vulkan - Low-overhead, cross-platform 3D graphics and compute API.
LaTeX - Typesetting language.
Economics - An economist's starter kit.
Funny Markov Chains
Bioinformatics
Colorful - Choose your next color scheme.
Steam - Digital distribution platform.
Bots - Building bots.
Site Reliability Engineering
Empathy in Engineering - Building and promoting more compassionate engineering cultures.
DTrace - Dynamic tracing framework.
Userscripts - Enhance your browsing experience.
Pokémon - Pokémon and Pokémon GO.
ChatOps - Managing technical and business operations through a chat.
Falsehood - Falsehoods programmers believe in.
Domain-Driven Design - Software development approach for complex needs by connecting the implementation to an evolving model.
Quantified Self - Self-tracking through technology.
SaltStack - Python-based config management system.
Web Design - For digital designers.
JMeter - Load testing and performance measurement tool.
Creative Coding - Programming something expressive instead of something functional.
No-Login Web Apps - Web apps that work without login.
Testing - Software testing.
Free Software - Free as in freedom.
Framer - Prototyping interactive UI designs.
Markdown - Markup language.
Dev Fun - Funny developer projects.
               </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import {swiper,swiperSlide} from "vue-awesome-swiper"
    export default {
        data() {
            return {
                swiperOption:{
                    direction: 'vertical',
                    slidesPerView: 'auto',
                    freeMode: true,
                    mousewhell: true
                }
            }
        },
        components:{
            swiper,
            swiperSlide
        }
    }
</script>

<style scoped>
.swiper-slide{
    height:4rem;
    text-align: center;
    padding-top: 3rem;
    border-bottom: 1px solid #ccc;
}
.swiper{
    height:20rem;
    overflow: hidden;
}
.text{
    font-size: 18px;
    text-align:left;
    padding: 30px;
    height:auto;
    box-sizing: border-box;
}
</style>